编辑器页面响应式设计：动态 form 表单扩展
概述
本节利用 Vue 的响应式特性，结合 Form 表单组件实现 Vditor 编辑器的动态配置。通过 Radio Group 切换编辑模式、Input Number 调整编辑器高度、语言选择等控件，实现编辑器属性的实时响应式调整。
页面设计
┌──────────────────────────────────────────────────┐
│ 编辑器配置面板 │
├──────────────┬───────────────┬───────────────────┤
│ 模式切换 │ 语言切换 │ 高度调整 │
│ ○ IR │ ○ 中文 │ [-] 500 [+] │
│ ○ SV │ ○ English │ │
│ ○ WYSIWYG │ ○ 繁体 │ │
├──────────────┴───────────────┴───────────────────┤
│ │
│ Vditor 编辑器 │
│ （响应式跟随配置变化） │
│ │
└───────────────────────────────────────────────────┘
text
动态配置实现
Schema 定义
// views/editor/config/schema.ts
import type { VpFormSchema } from '@/components/form/types'
export const editorConfigSchema: VpFormSchema[] = [
{
prop: 'mode',
value: 'ir',
type: 'radio-group',
label: '编辑模式',
options: [
{ label: '即时渲染 (IR)', value: 'ir' },
{ label: '分屏预览 (SV)', value: 'sv' },
{ label: '所见即所得', value: 'wysiwyg' }
]
},
{
prop: 'lang',
value: 'zh_CN',
type: 'radio-group',
label: '语言',
options: [
{ label: '中文', value: 'zh_CN' },
{ label: 'English', value: 'en_US' },
{ label: '繁體', value: 'zh_TW' }
]
},
{
prop: 'height',
value: 500,
type: 'input-number',
label: '高度',
min: 200,
max: 1000,
step: 50
}
]
typescript
页面组件
<!-- views/editor/index.vue -->
<template>
<div class="editor-page">
<!-- 配置面板 -->
<div class="config-panel">
<VpForm :schema="editorConfigSchema" v-model="editorConfig" />
</div>
<!-- 编辑器 -->
<VditorEditor
ref="editorRef"
v-model="content"
:height="editorConfig.height"
:mode="editorConfig.mode"
:options="editorOptions"
/>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch } from 'vue'
import VditorEditor from '@/components/editor/Vditor.vue'
import { editorConfigSchema } from './config/schema'
const editorRef = ref()
const content = ref('# Hello\n\n输入内容...')
const editorConfig = reactive({
mode: 'ir',
lang: 'zh_CN',
height: 500
})
// 根据配置动态生成 Vditor options
const editorOptions = computed(() => ({
lang: editorConfig.lang,
toolbar: [
'headings', 'bold', 'italic', 'strike', '|',
'list', 'ordered-list', 'check', '|',
'quote', 'code', 'inline-code', '|',
'fullscreen', 'preview'
]
}))
// 模式切换时需要重新初始化编辑器
watch(
() => editorConfig.mode,
() => {
// Vditor 不支持运行时切换 mode，需要重新初始化
editorRef.value?.destroy()
nextTick(() => {
editorRef.value?.init()
})
}
)
</script>
<style scoped>
.editor-page {
padding: 16px;
}
.config-panel {
margin-bottom: 16px;
padding: 16px;
border: 1px solid var(--el-border-color);
border-radius: 4px;
}
</style>
vue
Radio Group 控件
Radio Group 是本节新增的表单控件类型，用于在多个选项中进行单选：
// Radio Group Schema 定义
{
prop: 'mode',
value: 'ir',
type: 'radio-group',
label: '编辑模式',
options: [
{ label: '即时渲染', value: 'ir' },
{ label: '分屏预览', value: 'sv' },
{ label: '所见即所得', value: 'wysiwyg' }
]
}
typescript
<!-- Form Item 中 Radio Group 的渲染 -->
<template v-if="item.type === 'radio-group'">
<el-radio-group v-model="model[item.prop]">
<el-radio
v-for="option in item.options"
:key="option.value"
:value="option.value"
>
{{ option.label }}
</el-radio>
</el-radio-group>
</template>
vue
Input Number 控件
// Input Number Schema 定义
{
prop: 'height',
value: 500,
type: 'input-number',
label: '编辑器高度',
min: 200,
max: 1000,
step: 50
}
typescript
<!-- Form Item 中 Input Number 的渲染 -->
<template v-if="item.type === 'input-number'">
<el-input-number
v-model="model[item.prop]"
:min="item.min"
:max="item.max"
:step="item.step"
/>
</template>
vue
可扩展的配置项
| 配置项 | 控件类型 | 说明 |
|---|---|---|
| mode | radio-group | 编辑模式切换 |
| lang | radio-group | 界面语言 |
| height | input-number | 编辑器高度 |
| theme | switch | 暗黑主题 |
| readOnly | switch | 只读模式 |
| toolbar | checkbox-group | 工具栏配置 |
实践要点
- 利用 Vue 响应式特性，Form 表单的值变更会自动反映到编辑器配置上
- Radio Group 和 Input Number 是动态表单中常用的新增控件类型
- Vditor 的 mode 不支持运行时切换，需要 destroy 后重新 init
- 通过 computed 动态生成 editorOptions，实现配置与编辑器的解耦
- 可扩展更多配置项：暗黑主题、只读模式、工具栏自定义等
↑